<template>
	<div class="booking">
		<div class="container">
			<div class="booking-header">
				<h1 class="page-title">选择座位</h1>
				<div class="movie-info">
					<span>{{ movie.name }}</span>
					<el-divider direction="vertical"></el-divider>
					<span>{{ screening.time }}</span>
					<el-divider direction="vertical"></el-divider>
					<span>{{ screening.hall }}</span>
				</div>
			</div>

			<div class="seat-legend">
				<div class="legend-item">
					<div class="seat available"></div>
					<span>可选</span>
				</div>
				<div class="legend-item">
					<div class="seat selected"></div>
					<span>已选</span>
				</div>
				<div class="legend-item">
					<div class="seat occupied"></div>
					<span>已售</span>
				</div>
			</div>

			<div class="screen-container">
				<div class="screen">银幕</div>
			</div>

			<div class="seats-container">
				<div class="seats-grid">
					<div v-for="row in seats" :key="row.rowNum" class="seat-row">
						<div class="row-label">{{ row.rowNum }}</div>
						<div v-for="seat in row.seats" :key="seat.id" class="seat" :class="{
							'available': seat.status === 'available',
							'selected': selectedSeats.includes(seat.id),
							'occupied': seat.status === 'occupied'
						}" @click="toggleSeat(seat)">
							{{ seat.seatNum }}
						</div>
					</div>
				</div>
			</div>

			<div class="booking-summary">
				<div class="summary-info">
					<div class="selected-seats">
						<span>已选座位：</span>
						<template v-if="selectedSeats.length">
							<el-tag v-for="seatId in selectedSeats" :key="seatId" size="small" closable
								@close="toggleSeat(findSeat(seatId))">
								{{ getSeatLabel(seatId) }}
							</el-tag>
						</template>
						<span v-else>请选择座位</span>
					</div>
					<div class="total-price">
						总价：<span class="price">¥{{ totalPrice }}</span>
					</div>
				</div>
				<el-button type="primary" size="large" :disabled="!selectedSeats.length" @click="confirmBooking">
					确认选座
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import {
	findMovieByIdApi,
	hotMovieApi
} from '../api/movie'
import {
	findSchedulesApi
} from '@/api/schedule'

export default {
	name: 'Booking',
	data() {
		return {
			movie: {
				id: 1,
				title: '电影标题'
			},
			screening: {
				id: 1,
				time: '2024-03-21 14:30',
				hall: '1号厅',
				price: 45
			},
			seats: Array.from({
				length: 6
			}, (_, i) => ({
				rowNum: String.fromCharCode(65 + i), // A-F
				seats: Array.from({
					length: 12
				}, (_, j) => ({
					id: `${String.fromCharCode(65 + i)}${j + 1}`,
					seatNum: j + 1,
					status: 'available',
					rowNum: String.fromCharCode(65 + i)
				}))
			})),
			selectedSeats: []
		}
	},

	mounted() {
		this.movieId = this.$route.params.id;


	},
	computed: {
		totalPrice() {
			return this.selectedSeats.length * this.screening.price
		}
	},
	methods: {

		toggleSeat(seat) {
			if (seat.status === 'occupied') return

			const index = this.selectedSeats.indexOf(seat.id)
			if (index === -1) {
				if (this.selectedSeats.length >= 4) {
					this.$message.warning('最多只能选择4个座位')
					return
				}
				this.selectedSeats.push(seat.id)
			} else {
				this.selectedSeats.splice(index, 1)
			}
		},
		findSeat(seatId) {
			for (const row of this.seats) {
				const seat = row.seats.find(s => s.id === seatId)
				if (seat) return seat
			}
			return null
		},
		getSeatLabel(seatId) {
			const seat = this.findSeat(seatId);
			console.log("seat-->" + seat.rowNum);
			return seat ? `${seat.rowNum}排${seat.seatNum}号` : ''
		},
		confirmBooking() {
			if (!this.selectedSeats.length) {
				this.$message.warning('请至少选择一个座位')
				return
			}

			this.$router.push({
				path: '/order-confirm',
				query: {
					movieId: this.movie.id,
					screeningId: this.screening.id,
					seats: this.selectedSeats.join(',')
				}
			})
		}
	}
}
</script>

<style scoped>
.booking-header {
	text-align: center;
	margin-bottom: 30px;
}

.movie-info {
	font-size: 16px;
	color: #606266;
	margin-top: 10px;
}

.seat-legend {
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}

.legend-item {
	display: flex;
	align-items: center;
	margin: 0 15px;
}

.legend-item span {
	margin-left: 8px;
	font-size: 14px;
	color: #606266;
}

.screen-container {
	text-align: center;
	margin-bottom: 30px;
}

.screen {
	width: 80%;
	height: 40px;
	margin: 0 auto;
	background: #f2f6fc;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	color: #909399;
	font-size: 14px;
}

.seats-container {
	width: 100%;
	overflow-x: auto;
	margin-bottom: 30px;
}

.seats-grid {
	min-width: 600px;
	margin: 0 auto;
}

.seat-row {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.row-label {
	width: 30px;
	text-align: center;
	color: #606266;
	font-size: 14px;
}

.seat {
	width: 35px;
	height: 35px;
	margin: 0 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.3s;
}

.seat.available {
	background: #fff;
	border: 1px solid #dcdfe6;
	color: #606266;
}

.seat.available:hover {
	border-color: #409eff;
	color: #409eff;
}

.seat.selected {
	background: #409eff;
	border-color: #409eff;
	color: #fff;
}

.seat.occupied {
	background: #f5f7fa;
	border-color: #dcdfe6;
	color: #c0c4cc;
	cursor: not-allowed;
}

.booking-summary {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	background: #fff;
	box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, .1);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.summary-info {
	flex: 1;
}

.selected-seats {
	margin-bottom: 10px;
}

.selected-seats .el-tag {
	margin: 0 5px;
}

.total-price {
	font-size: 16px;
	color: #606266;
}

.price {
	font-size: 24px;
	color: #f56c6c;
	font-weight: bold;
}

.el-button {
	margin-left: 20px;
}
</style>